<template>
  <div class="hello">
    <!-- 输入框，绑定 v-model 指令实现双向数据绑定 -->
    <input v-model="inputValue" placeholder="请输入内容" @input="updateDisplay">
    <!-- 显示输入内容 -->
    <p>{{ displayValue }}</p>
    <button @click="clearDisplay">清空</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      inputValue: '', // 输入框的值
      displayValue: '' // 要显示的值
    };
  },
  methods: {
    // 输入框内容变化时更新显示内容
    updateDisplay() {
      this.displayValue = this.inputValue;
    },
    // 清空显示内容
    clearDisplay() {
      this.inputValue = '';
      this.displayValue = '';
    }
  }
};
</script>

<style scoped>
/* 样式部分，可根据需要调整 */
input {
  margin-bottom: 10px;
}
button {
  margin-top: 10px;
}
</style>